<template>
    <div>
        <Card dis-hover>
            <div class="page-body">
                <Form ref="queryForm" :label-width="100" label-position="left" inline>
                    <Row>
                        <Button @click="create" icon="android-add" type="primary" size="large">{{L('Add')}}</Button>
                        <Button icon="ios-search" type="primary" size="large" @click="getpage" class="toolbar-btn">{{L('Find')}}</Button>
                    </Row>
                </Form>
                <div class="margin-top-10">
                    <Table :loading="loading" :columns="columns" :no-data-text="L('NoDatas')" border :data="list">
                    </Table>
                    <Page  show-sizer class-name="fengpage" :total="totalCount" class="margin-top-10" @on-change="pageChange" @on-page-size-change="pagesizeChange" :page-size="pageSize" :current="currentPage"></Page>
                </div>
            </div>
        </Card>
        <create v-model="createModalShow" @save-success="getpage"></create>
        <edit v-model="editModalShow" @save-success="getpage"></edit>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Inject, Prop, Watch } from "vue-property-decorator";
import Util from "@/lib/util";
import AbpBase from "@/lib/abpbase";
import PageRequest from "@/store/entities/page-request";
import create from "./create.vue";
import edit from "./edit.vue";

class PageTenantRequest extends PageRequest {
  keyword: string = "";
  isActive: boolean = null;
}

@Component({
  components: { create, edit },
})
export default class Tenants extends AbpBase {
  edit() {
    this.editModalShow = true;
  }

  pagerequest: PageTenantRequest = new PageTenantRequest();

  createModalShow: boolean = false;
  editModalShow: boolean = false;
  get list() {
    return this.$store.state.leaveForm.list;
  }
  get loading() {
    return this.$store.state.leaveForm.loading;
  }
  create() {
    this.createModalShow = true;
  }
  isActiveChange(val: string) {
    if (val === "Actived") {
      this.pagerequest.isActive = true;
    } else if (val === "NoActive") {
      this.pagerequest.isActive = false;
    } else {
      this.pagerequest.isActive = null;
    }
  }
  pageChange(page: number) {
    this.$store.commit("leaveForm/setCurrentPage", page);
    this.getpage();
  }
  pagesizeChange(pagesize: number) {
    this.$store.commit("leaveForm/setPageSize", pagesize);
    this.getpage();
  }
  async getpage() {
    this.pagerequest.maxResultCount = this.pageSize;
    this.pagerequest.skipCount = (this.currentPage - 1) * this.pageSize;

    await this.$store.dispatch({
      type: "leaveForm/getAll",
      data: this.pagerequest,
    });
  }

  get pageSize() {
    return this.$store.state.leaveForm.pageSize;
  }
  get totalCount() {
    return this.$store.state.leaveForm.totalCount;
  }
  get currentPage() {
    return this.$store.state.leaveForm.currentPage;
  }
  columns = [
    {
      title: this.L("审批状态"),
      key:"workflowStatusName",
    },
    {
      title: this.L("Days"),
      key: "days",
    },
    {
      title: this.L("Reason"),
      key: "reason",
    },
    {
      title: this.L("Memo"),
      key: "memo",
    },
    {
      title: this.L("UpdateTime"),
      key: "updateTime",
    },
    {
      title: this.L("Actions"),
      key: "Actions",
      width: 250,
      render: (h: any, params: any) => {
        return h("div", [
          params.row.workflowStatus == 0
            ? h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small",
                  },
                  style: {
                    marginRight: "5px",
                  },
                  on: {
                    click: async () => {
                      this.$Modal.confirm({
                        title: this.L("Tips"),
                        content: this.L("发起审批"),
                        okText: this.L("Yes"),
                        cancelText: this.L("No"),
                        onOk: async () => {
                          let workTaskForm = {
                            WorkflowId:"f55bf8c2-d800-4424-a795-1cc674de31b8",
                            name: "对接系统请假流程" + new Date().getTime(),
                            formData: JSON.stringify(params.row),
                            entityFullName:
                              "WorkflowCoreDockingDemo.CustomForm.LeaveForm",
                            entityKeyValue: params.row.id + "",
                          };

                          let dispatchPath = "leaveForm/createWorkTask";
                          this.$store
                            .dispatch(dispatchPath, { data: workTaskForm })
                            .then((res) => {
                              return res.data.data;
                            })
                            .then((task) => {
                              const data = {
                                workTaskId: task.id,
                              };
                              this.$store
                                .dispatch("leaveForm/startWorkTask", {
                                  data: data,
                                })
                                .then((res) => {
                                  this.getpage();
                                })
                                .catch((e) => {});
                            })
                            .catch((e) => {});

                          await this.getpage();
                        },
                      });
                    },
                  },
                },
                this.L("发起审批")
              )
            : h("div"),

          h(
            "Button",
            {
              props: {
                type: "primary",
                size: "small",
              },
              style: {
                marginRight: "5px",
              },
              on: {
                click: () => {
                  this.$store.commit("leaveForm/edit", params.row);
                  this.edit();
                },
              },
            },
            this.L("Edit")
          ),
          h(
            "Button",
            {
              props: {
                type: "error",
                size: "small",
              },
              on: {
                click: async () => {
                  this.$Modal.confirm({
                    title: this.L("Tips"),
                    content: this.L("DeleteTenantConfirm"),
                    okText: this.L("Yes"),
                    cancelText: this.L("No"),
                    onOk: async () => {
                      await this.$store.dispatch({
                        type: "leaveForm/delete",
                        data: params.row,
                      });
                      await this.getpage();
                    },
                  });
                },
              },
            },
            this.L("Delete")
          ),
        ]);
      },
    },
  ];
  async created() {
    this.getpage();
  }
}
</script>
